<template>
  <div class="container" style="padding-left: 20px;padding-right: 80px;">
    <div class="upper-container">
      <div class="left-section">
        <div class="left-content">
          <div class="left-info">基本信息</div>

        </div>
        <div style="margin-left: 20px;">
          <div class="form-field">
            <span>事件类型：</span>
            <el-col :span="15">
            <el-select v-model="value1" clearable filterable placeholder="请选择">
              <el-option  v-for="v in Tooptions" :key="v.value" :label="v.label" :value="v.label"></el-option>
            </el-select>
          </el-col>
          </div>
          <div class="form-row">
        
            <div class="form-field">
             
              <span>事件分类：</span>
              <el-col :span="15">
              <el-select v-model="value2" clearable filterable placeholder="请选择">
                <el-option v-for="v in Cfoptions" :key="v.value" :label="v.label" :value="v.label">
                </el-option>
              </el-select>
            </el-col>
            </div>
            <div class="form-field">
              <span class="demonstration">发生时间：</span>
              <el-col :span="24">
              <el-date-picker v-model="value3" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-col>
            </div>
     
          </div>
          <div class="form-field">
            <span>影响度：</span>
            <el-radio-group v-model="radio_effect">
              <el-radio :label="1">低</el-radio>
              <el-radio :label="2">中</el-radio>
              <el-radio :label="3">高</el-radio>
              <el-radio :label="4">特</el-radio>
            </el-radio-group>
          </div>
          <div class="form-field">
            <span>紧急度：</span>
            <el-radio-group v-model="radio_emergent">
              <el-radio :label="1">低</el-radio>
              <el-radio :label="2">中</el-radio>
              <el-radio :label="3">较高</el-radio>
              <el-radio :label="4">高</el-radio>
              <el-radio :label="5">特高</el-radio>
            </el-radio-group>
          </div>
          <div class="form-field">
            <span class="demonstration">摘要：</span>
            <el-col :span="15">
              <el-input size="small" placeholder="请输入内容" v-model="input_abstract" clearable>
              </el-input>
            </el-col>
          </div>
          <div class="form-field">
            <span class="demonstration">详细信息：</span>
            <el-col :span="15">
              <el-input class="input-width" placeholder="请输入内容" v-model="input_illustrate" clearable>
              </el-input>
            </el-col>
          </div>
          <div class="form-field">
            <span class="demonstration">附件：</span>
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
            
              
              >
              <el-button size="small" type="primary">点击上传</el-button>

            </el-upload>

          </div>
        </div>

      </div>
      <div class="right-section">

        <div class="left-content">
          <div class="left-info">联系人信息</div>
        </div>
        <div style="margin-left: 20px;">
          <div class="form-field">
            <span>事件来源：</span>
            <el-col :span="24">
            <el-select v-model="value4" clearable filterable placeholder="请选择">
              <el-option v-for="v in sourceoptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
            </el-select> 
          </el-col>
          </div>
          <div class="form-field">
            <span>来源机构：</span>
            <el-col :span="24">
            <el-select v-model="value5" clearable filterable placeholder="请选择">
              <el-option v-for="v in CFcoptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-col>
          </div>
          <div class="form-field">
            <span class="demonstration">联系人：</span>
            <el-col :span="24">
              <el-input placeholder="请输入内容" v-model="value6" clearable>
              </el-input>
            </el-col>
          </div>
          <div class="form-field">
            <span class="demonstration">联系电话：</span>
            <el-col :span="24">
              <el-input placeholder="请输入内容" v-model="value7" clearable>
              </el-input>
            </el-col>
          </div>
          <div class="form-field">
            <span class="demonstration">地址：</span>
            <el-col :span="24">
              <el-input placeholder="请输入内容" v-model="value8" clearable>
              </el-input>
            </el-col>
          </div>

        </div>
      </div>
    </div>
    <div class="lower-container">
      <div class="left-content">
        <div class="left-info">影响配置</div>



        <div style="margin-left: 20px;">
          <div class="form-field">
            <template>
              <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%"
              @select="handleSelectionChange"> 
              >
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="date" label="编码">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="Gversion" label="网关版本">
                </el-table-column>
                <el-table-column prop="Fversion" label="固件版本 ">
                </el-table-column>
                <el-table-column prop="Ipaddress" label="IP地址 ">
                </el-table-column>
                <el-table-column prop="State" label="运行状态 ">
                </el-table-column>
                <el-table-column prop="illustrate" label="配置情况说明 ">
                </el-table-column>
              </el-table>
            </template>
          </div>
          <div >
           
            <el-button @click="pushscore1()">确认添加</el-button>
            <el-button @click="editscore1()">保存修改</el-button>
            
    
          </div>

        </div>

      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      radio_effect: 1,
      radio_emergent: 1,
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      value8: "",
      value9:"",
      selectedRowIds: [],

      input_abstract: "",
      input_illustrate: "",
      tableData: [{
        id:1,
        date: "001",
        name: "网关1",
        Gversion: "192.168.0.1",
        Fversion: "monservice",
        Ipaddress: "1.0.1",
        State: "正常",
        illustrate: "一切正常",
      }, {
        id:2,
        date: "002",
        name: "网关2",
        Gversion: "192.168.0.2",
        Fversion: "monservice",
        Ipaddress: "1.0.1",
        State: "正常",
        illustrate: "一切正常",
      }, {
        id:3,
        date: "003",
        name: "网关3",
        Gversion: "192.168.0.3",
        Fversion: "monservice",
        Ipaddress: "1.0.1",
        State: "正常",
        illustrate: "一切正常",
      }, {
        id:4,
        date: "004",
        name: "网关4",
        Gversion: "192.168.0.4",
        Fversion: "monservice",
        Ipaddress: "1.0.1",
        State: "正常",
        illustrate: "一切正常",
      },],
      Cfoptions: [
      {
          value: 1,
          label: '网络系统'
        }, {
          value: 2,
          label: '服务器系统'
        }, {
          value: 3,
          label: '门户网站'
        }, {
          value: 4,
          label: '应用系统'
        }, {
          value: 5,
          label: '桌面系统'
        },{
          value: 6,
          label: '机房管理'
        }
      ],
      Tooptions:[
      {
          value: 1,
          label: '故障'
        }, {
          value: 2,
          label: '服务请求'
        }, {
          value: 3,
          label: '服务咨询'
        }, {
          value: 4,
          label: '安全类事件'
        },
      ],
      sourceoptions:[
      {
          value: 1,
          label: '电话'
        }, {
          value: 2,
          label: 'web'
        }, {
          value: 3,
          label: '监控系统'
        }, {
          value: 4,
          label: '电子邮件'
        },
      ],
      CFcoptions:[ {
          value: 1,
          label: '信息中心'
        }, {
          value: 2,
          label: '指挥中心'
        }, 
       ]

    };
  },
  methods:{
    pushscore1(){
      if(this.radio_emergent==1){
        this.value9="★"
      }
      else if(this.radio_emergent==2){
        this.value9="★★"
      }
      else if(this.radio_emergent==3){
        this.value9="★★★"
      }
      else if(this.radio_emergent==4){
        this.value9="★★★★"
      }
      else if(this.radio_emergent==5){
        this.value9="★★★★★"
      }
      this.$axios.post(`/test/`,{
      
      code: this.selectedRowIds[0],
      abstract:this.input_abstract,
       state: '未提交',
       data: this.value3,
       link: this.value2,
       user: this.value6,
       pri: this.value9,
       type: this.value1,
      phone: this.value7,
       adress:this.value8

      },
     alert('添加成功'),
      this.$router.push('/home/repair/problem')
      
      );
    },
    handleSelectionChange(selection) {
      this.selectedRowIds = selection.map(item => item.date);
      console.log(this.selectedRowIds);
    },
    editscore1(){
      if(this.radio_emergent==1){
        this.value9="★"
      }
      else if(this.radio_emergent==2){
        this.value9="★★"
      }
      else if(this.radio_emergent==3){
        this.value9="★★★"
      }
      else if(this.radio_emergent==4){
        this.value9="★★★★"
      }
      else if(this.radio_emergent==5){
        this.value9="★★★★★"
      }
      console.log(this.value9)
     
     
      this.$axios.patch(`/test/${this.$store.state.a}`,{
      
        code: this.selectedRowIds[0],
      abstract:this.input_abstract,
       state: '未提交',
       data: this.value3,
       link: this.value2,
       user: this.value6,
       pri: this.value9,
       type: this.value1,
      phone: this.value7,
       adress:this.value8

    },
    
   alert('修改成功'),
   console.log(6666,this.$store.state.a) ,
   this.$router.push('/home/repair/problem'),
  
    );
    }
    }
    ,
    mounted(){
      
    }

  
};
</script>
  
<style scoped>






.container {
  height: auto;
  display: flex;
  flex-direction: column;
}

.upper-container {
  height: 50%;
  display: flex;
}

.left-section {
  width: 60%;
  
  align-content: left;
}

.left-content {
  display: flex;
  flex-direction: column;
}

.left-info {
  align-self: flex-start;
}

.right-section {
  width: 40%;
  

}

.lower-container {
  height: 50%;
  
}
.el-date-editor.el-input{
  width: 100%;
}
.form-field {
  display: flex;
  align-items: center;
}

.form-row {
  display:flex;
}
span{
  width:120px;
  text-align: right;
}
::v-deep .has-gutter{
  line-height: 10px;
}
.el-select{
  width: 100%;
}
</style>
  